import { FC } from "react"
import cate from "./styles/catehead.module.css"
import Rank from "./Ranking"
import Recommend from "./Recommend"
import BottomNavict from "./BottomNavict"

const books = {
    img:'https://static.zongheng.com/upload/cover/fe/28/fe286ac9c8684971e01da586786b1245.jpeg',
    name:'洪荒武祖传',
    author:'佛血',
    tags:'玄幻仙侠',
    desc:'穿越洪荒，成为第一人巫，创武道，面对巫妖大劫，三皇五帝，封神、诸子百家，始皇，西游',
    updateTime:'2024-07-24',
    latestChapter:'第1000章 大结局'
}

const recommendList:Array<{title:string,desc:string}> = [
    {
        title:'我和三千年前昆仑剑仙谈恋爱',
        desc:'她来自三千年前，被困在一片虚无空间，我想救她出去。天地为炉，阴阳为火，衍生万物。'
    },
    {
        title:'我和三千年前昆仑剑仙谈恋爱',
        desc:'她来自三千年前，被困在一片虚无空间，我想救她出去。天地为炉，阴阳为火，衍生万物。'
    },
    {
        title:'我和三千年前昆仑剑仙谈恋爱',
        desc:'她来自三千年前，被困在一片虚无空间，我想救她出去。天地为炉，阴阳为火，衍生万物。'
    },
    {
        title:'我和三千年前昆仑剑仙谈恋爱',
        desc:'她来自三千年前，被困在一片虚无空间，我想救她出去。天地为炉，阴阳为火，衍生万物。'
    }
]
export const CateHead: FC<{props:{cateName: string}}> = ({props}) => {
    const { cateName } = props
    return (
        <div className={cate.app}>
            <div className={cate.title}>
                {cateName}
            </div>
            <div className={cate.recommend}>
                <div className={cate.rec_left}>
                    <div className={cate.rec_left_top}>
                        <div className={cate.img}>
                            <img src={books.img} alt="" />
                        </div>
                        <div className={cate.info}>
                            <p className={cate.name}>{books.name}</p>
                            <p className={cate.desc}>作者:<span className={cate.space}>{books.author}</span>类型:<span className={cate.space}>{books.tags}</span></p>
                            <p className={cate.description}>{books.desc}</p>
                            <p className={cate.desc}>更新时间<span className={cate.space}>{books.updateTime}</span></p>
                            <p className={cate.desc}>最新章节<span className={cate.space}>{books.latestChapter}</span></p>
                        </div>
                    </div>
                    <div className={cate.rec_left_bottom}>
                        {
                            recommendList.map((item,index)=>{
                                return (
                                    <div className={cate.bottom_item} key={index}>
                                        <img className={cate.item_img} src="https://revo.zongheng.com/www/2024/images/72fbd53.png" alt="" />
                                        <div className={cate.item_title}>{item.title}</div>
                                        <div className={cate.item_desc}>{item.desc}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className={cate.rec_right}>
                    <div className={cate.rec_right_title}>TOP10 强推榜</div>
                    <Rank type={0} />
                </div>
            </div>
            <div className={cate.recommend}>
                <Recommend recomInfo={{type:0,title:"经典完本"}} />
            </div>
            <div className={cate.recommend}>
                <Recommend recomInfo={{type:0,title:"热销作品"}} />
            </div>
            <BottomNavict />
        </div>
    )
}